<template>
    <div class="home-container">
        <el-row :gutter="20">
            <!-- 销售分析 -->
            <el-col :span="24">
                <div class="page-header">
                    <div class="left">销售工作台</div>
                    <div class="right">
                        <el-select
                            v-model="search.time_type"
                            style="width: 100px;"
                            @change="init"
                        >
                            <el-option
                                label="今天"
                                :value="1"
                            />
                            <el-option
                                label="昨天"
                                :value="2"
                            />
                            <el-option
                                label="本周"
                                :value="3"
                            />
                            <el-option
                                label="上周"
                                :value="4"
                            />
                            <el-option
                                label="本月"
                                :value="5"
                            />
                            <el-option
                                label="上月"
                                :value="6"
                            />
                            <el-option
                                label="近7天"
                                :value="7"
                            />
                            <el-option
                                label="近30天"
                                :value="8"
                            />
                        </el-select>
                    </div>
                </div>
            </el-col>
            <!-- 销售分析 -->
            <el-col :span="24">
                <div class="card card1">
                    <div class="box-1">
                        <div class="box-left">
                            <div class="box-tit">新增线索数</div>
                            <div class="box-num" @click="detail('新增线索', 1)">{{ saleInfo.user_data.add_num }}</div>
                            <div>
                                <span v-if="Number(saleInfo.user_data.add_rate) > 0" class="add-rate">{{ saleInfo.user_data.add_rate }}%</span>
                                <span v-else class="reduce-rate">{{ saleInfo.user_data.add_rate }}%</span>
                                <span class="bijiao">较{{ text }}</span>
                            </div>
                        </div>
                        <div class="box-right">
                            <line-chart :id="1" :line-data="saleInfo.user_data.list" />
                        </div>
                    </div>
                    <div class="box-1">
                        <div class="box-left">
                            <div class="box-tit">新增客户数</div>
                            <div class="box-num" @click="detail('新增客户', 2)">{{ saleInfo.kehu_data.add_num }}</div>
                            <div>
                                <span v-if="Number(saleInfo.kehu_data.add_rate) > 0" class="add-rate">{{ saleInfo.kehu_data.add_rate }}%</span>
                                <span v-else class="reduce-rate">{{ saleInfo.kehu_data.add_rate }}%</span>
                                <span class="bijiao">较{{ text }}</span>
                            </div>
                        </div>
                        <div class="box-right">
                            <line-chart :id="2" :line-data="saleInfo.kehu_data.list" />
                        </div>
                    </div>
                    <div class="box-1">
                        <div class="box-left">
                            <div class="box-tit">新增有效沟通</div>
                            <div class="box-num" @click="detail('新增有效沟通', 3)">{{ saleInfo.phone_data.add_num }}</div>
                            <div>
                                <span v-if="Number(saleInfo.phone_data.add_rate) > 0" class="add-rate">{{ saleInfo.phone_data.add_rate }}%</span>
                                <span v-else class="reduce-rate">{{ saleInfo.phone_data.add_rate }}%</span>
                                <span class="bijiao">较{{ text }}</span>
                            </div>
                        </div>
                        <div class="box-right">
                            <line-chart :id="3" :line-data="saleInfo.phone_data.list" />
                        </div>
                    </div>
                    <div class="box-1">
                        <div class="box-left">
                            <div class="box-tit">新增上门客户数</div>
                            <div class="box-num" @click="detail('新增上门客户', 4)">{{ saleInfo.shangmen_kehu_data.add_num }}</div>
                            <div>
                                <span v-if="Number(saleInfo.shangmen_kehu_data.add_rate) > 0" class="add-rate">{{ saleInfo.shangmen_kehu_data.add_rate }}%</span>
                                <span v-else class="reduce-rate">{{ saleInfo.shangmen_kehu_data.add_rate }}%</span>
                                <span class="bijiao">较{{ text }}</span>
                            </div>
                        </div>
                        <div class="box-right">
                            <line-chart :id="4" :line-data="saleInfo.shangmen_kehu_data.list" />
                        </div>
                    </div>
                    <div class="box-1">
                        <div class="box-left">
                            <div class="box-tit">新增商机数</div>
                            <div class="box-num" @click="detail('新增商机', 5)">{{ saleInfo.business_data.add_num }}</div>
                            <div>
                                <span v-if="Number(saleInfo.business_data.add_rate) > 0" class="add-rate">{{ saleInfo.business_data.add_rate }}%</span>
                                <span v-else class="reduce-rate">{{ saleInfo.business_data.add_rate }}%</span>
                                <span class="bijiao">较{{ text }}</span>
                            </div>
                        </div>
                        <div class="box-right">
                            <line-chart :id="5" :line-data="saleInfo.business_data.list" />
                        </div>
                    </div>
                    <div class="box-1">
                        <div class="box-left">
                            <div class="box-tit">新增订单金额</div>
                            <div class="box-num" @click="detail('新增订单金额', 6)">{{ saleInfo.order_data.add_num || 0 }}</div>
                            <div>
                                <span v-if="Number(saleInfo.order_data.add_rate) > 0" class="add-rate">{{ saleInfo.order_data.add_rate }}%</span>
                                <span v-else class="reduce-rate">{{ saleInfo.order_data.add_rate }}%</span>
                                <span class="bijiao">较{{ text }}</span>
                            </div>
                        </div>
                        <div class="box-right">
                            <line-chart :id="6" :line-data="saleInfo.order_data.list" />
                        </div>
                    </div>
                    <div class="box-1">
                        <div class="box-left">
                            <div class="box-tit">新增收款金额</div>
                            <div class="box-num" @click="detail('新增收款金额', 7)">{{ saleInfo.order_coll_Data.add_num }}</div>
                            <div>
                                <span v-if="Number(saleInfo.order_coll_Data.add_rate) > 0" class="add-rate">{{ saleInfo.order_coll_Data.add_rate }}%</span>
                                <span v-else class="reduce-rate">{{ saleInfo.order_coll_Data.add_rate }}%</span>
                                <span class="bijiao">较{{ text }}</span>
                            </div>
                        </div>
                        <div class="box-right">
                            <line-chart :id="7" :line-data="saleInfo.order_coll_Data.list" />
                        </div>
                    </div>
                    <div class="box-1">
                        <div class="box-left">
                            <div class="box-tit">新增实收金额</div>
                            <div class="box-num" @click="detail('新增实收金额', 7)">{{ saleInfo.weixin_data.add_num }}</div>
                            <div>
                                <span v-if="Number(saleInfo.weixin_data.add_rate) > 0" class="add-rate">{{ saleInfo.weixin_data.add_rate }}%</span>
                                <span v-else class="reduce-rate">{{ saleInfo.weixin_data.add_rate }}%</span>
                                <span class="bijiao">较{{ text }}</span>
                            </div>
                        </div>
                        <div class="box-right">
                            <line-chart :id="8" :line-data="saleInfo.weixin_data.list" />
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 今日待办 -->
            <el-col :span="12">
                <div class="card">
                    <div class="title">
                        <div>今日待办</div>
                    </div>
                    <div class="content">
                        <div class="work-li">
                            未分配的新线索<span
                                class="color"
                            >{{ todayWork.user_count }}</span>条
                        </div>
                        <div class="work-li work-li2">
                            未跟进过的新线索 <span
                                class="color"
                            >{{ todayWork.no_genjin_count }}</span>条
                        </div>
                        <div class="work-li">
                            待上门客户数<span
                                class="color"
                            >{{ todayWork.daishangmen }}</span>个
                        </div>
                        <div class="work-li work-li2">
                            未跟进过的新客户个数 <span
                                class="color"
                            >{{ todayWork.no_genjin_kehu_count }}</span>个
                        </div>
                        <div class="work-li">
                            未完成收款的订单数 <span
                                class="color"
                            >{{ todayWork.weishoukuan }}</span>个
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 漏斗 -->
            <el-col :span="12">
                <div class="card">
                    <div class="title">
                        <div>商机漏斗</div>
                    </div>
                    <div class="content">
                        <div class="sales-list">
                            <div class="sales-li">
                                <div class="li-tit">总计</div>
                                <div class="li-num">{{ loudouData.count }}</div>
                            </div>
                            <div class="sales-li">
                                <div class="li-tit">总金额</div>
                                <div class="li-num">{{ loudouData.commission }}</div>
                            </div>
                            <div class="sales-li">
                                <div class="li-tit">总预测成交金额</div>
                                <div class="li-num">{{ loudouData.loan }}</div>
                            </div>
                        </div>
                        <div class="chart-box">
                            <funnel-chart :loudou-data="loudouData" />
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 客户资产 -->
            <el-col :span="12">
                <div class="card">
                    <div class="title">
                        <div>客户资产结构</div>
                    </div>
                    <div class="content">
                        <div class="chart-box chart-box1">
                            <el-empty v-if="propertyData.shangjiKehu==0 &&propertyData.weishangmenKehu==0 &&propertyData.shangmenKehu==0 &&propertyData.yuyueKehu==0 &&propertyData.fugouKehu==0 &&propertyData.zenggouKehu==0 &&propertyData.xingouKehu==0 &&propertyData.tiyanKehu==0 && propertyData.chengjiaoKehu==0 && propertyData.addKehu==0 && propertyData.total==0 && propertyData.addUser==0 && propertyData.addGongUser==0 && propertyData.wuxiaoUser==0" description="暂无数据" />
                            <property-chart :property-data="propertyData" />
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 销售排行 -->
            <el-col :span="12">
                <div class="card">
                    <div class="title">
                        <div>销售排行榜Top10 <span class="bijiao">{{ text }}</span></div>
                        <el-select
                            v-model="sale_type"
                            size="mini"
                            style="width: 150px;"
                            @change="sort"
                        >
                            <el-option
                                label="成交客户"
                                :value="1"
                            />
                            <el-option
                                label="订单金额"
                                :value="2"
                            />
                            <el-option
                                label="收款金额"
                                :value="3"
                            />
                        </el-select>
                    </div>
                    <div class="content">
                        <div class="sale-box">
                            <el-empty v-if="sale_data.length===0" description="暂无数据" />
                            <div v-for="(item, index) in sale_data" :key="item.member_id" class="sale-li">
                                <div v-if="index===0" class="sale-num">
                                    <img src="~@/assets/images/top1.png">
                                </div>
                                <div v-else-if="index===1" class="sale-num">
                                    <img src="~@/assets/images/top2.png">
                                </div>
                                <div v-else-if="index===2" class="sale-num">
                                    <img src="~@/assets/images/top3.png">
                                </div>
                                <div v-else class="sale-num">
                                    {{ index+1 }}
                                </div>
                                <div class="sale-name">
                                    {{ item.username }}
                                </div>
                                <div class="center">
                                    <el-progress :stroke-width="12" :show-text="false" :percentage="item.rate" />
                                </div>
                                <div class="right">
                                    <div class="sale-money">{{ item.total }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 销售能力 -->
            <el-col :span="12">
                <div class="card">
                    <div class="title">
                        <div>销售能力图谱</div>
                    </div>
                    <div class="content">
                        <div class="chart-box chart-box1">
                            <radar-chart :radar-data="radarData" />
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 渠道排行 -->
            <el-col :span="12">
                <div class="card">
                    <div class="title">
                        <div>渠道排行榜Top10 <span class="bijiao">{{ text }}</span></div>
                        <el-select
                            v-model="qudao_type"
                            size="mini"
                            style="width: 150px;"
                            @change="qudaoSort"
                        >
                            <el-option
                                label="成交客户"
                                :value="1"
                            />
                            <el-option
                                label="订单金额"
                                :value="2"
                            />
                            <el-option
                                label="收款金额"
                                :value="3"
                            />
                        </el-select>
                    </div>
                    <div class="content">
                        <div class="sale-box">
                            <el-empty v-if="qudao_data.length===0" description="暂无数据" />
                            <div v-for="(item, index) in qudao_data" :key="item.member_id" class="sale-li">
                                <div v-if="index===0" class="sale-num">
                                    <img src="~@/assets/images/top1.png">
                                </div>
                                <div v-else-if="index===1" class="sale-num">
                                    <img src="~@/assets/images/top2.png">
                                </div>
                                <div v-else-if="index===2" class="sale-num">
                                    <img src="~@/assets/images/top3.png">
                                </div>
                                <div v-else class="sale-num">
                                    {{ index+1 }}
                                </div>
                                <div class="sale-name">
                                    {{ item.poolname }}
                                </div>
                                <div class="center">
                                    <el-progress :stroke-width="12" color="#fd7e78" :show-text="false" :percentage="item.rate" />
                                </div>
                                <div class="right">
                                    <div class="sale-money">{{ item.total }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 渠道质量 -->
            <el-col :span="12">
                <div class="card">
                    <div class="title">
                        <div>渠道质量 <span class="bijiao">{{ text }}</span></div>
                    </div>
                    <div class="content">
                        <div class="chart-box chart-box1">
                            <channel-chart :qudao-data="qudaoData" />
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 数据详情 -->
        <detail-drawer ref="detailDrawer" />
    </div>
</template>
<script>
import { reservationList } from '@/api/reservation'
import { memberList } from '@/api/system'
import { loudou, sort, qudaoSort, work, qudao, xiaoshouPower, kehu, xiaoshou } from '@/api/dashboard.js'
import funnelChart from './components/funnelEchart'
import channelChart from './components/channelChart'
import radarChart from './components/radarChart'
import propertyChart from './components/propertyChart'
import lineChart from './components/lineChart'
import DetailDrawer from './components/DetailDrawer'
export default {
    name: 'Home',
    components: {funnelChart, channelChart, radarChart, propertyChart, lineChart, DetailDrawer},
    data() {
        return {
            loading: false,
            search: {
                time_type: 5
            },
            sale_type: 1,
            qudao_type: 1,
            addDialogVisible: false,
            loudouData: {},
            sale_data: [],
            qudao_data: [],
            todayWork: {},
            qudaoData: [],
            radarData: {},
            propertyData: {},
            saleInfo: {
                user_data: {
                    add_num: 0
                },
                kehu_data: {
                    add_num: 0
                },
                phone_data: {
                    add_num: 0
                },
                shangmen_kehu_data: {
                    add_num: 0
                },
                business_data: {
                    add_num: 0
                },
                order_data: {
                    add_num: 0
                },
                order_coll_Data: {
                    add_num: 0
                },
                weixin_data: {
                    add_num: 0
                }
            }
        }
    },
    computed: {
        text() {
            let text = ''
            if (this.search.time_type == 1) {
                text = '昨天'
            }
            if (this.search.time_type == 2) {
                text = '前天'
            }
            if (this.search.time_type == 3) {
                text = '上周'
            }
            if (this.search.time_type == 4) {
                text = '上上周'
            }
            if (this.search.time_type == 5) {
                text = '上月'
            }
            if (this.search.time_type == 6) {
                text = '上上月'
            }
            if (this.search.time_type == 7) {
                text = '上7天'
            }
            if (this.search.time_type == 8) {
                text = '上30天'
            }
            return text;
        }
    },
    mounted() {
        this.getOptions();
        this.getList();
        this.init()
    },
    methods: {
        init() {
            this.sort()
            this.loudou()
            this.work()
            this.qudaoSort()
            this.qudao()
            this.xiaoshouPower()
            this.kehu()
            this.xiaoshou()
        },
        xiaoshou() {
            let params = {
                time_type: this.search.time_type
            }
            xiaoshou(params).then(res => {
                if (res.status === 1) {
                    this.saleInfo = res.data
                } else {
                    this.$toast.fail(res.msg)
                }
            })
        },
        xiaoshouPower() {
            let params = {
                time_type: this.search.time_type
            }
            xiaoshouPower(params).then(res => {
                if (res.status === 1) {
                    this.radarData = res.data
                } else {
                    this.$toast.fail(res.msg)
                }
            })
        },
        kehu() {
            let params = {
                time_type: this.search.time_type
            }
            kehu(params).then(res => {
                if (res.status === 1) {
                    this.propertyData = res.data
                } else {
                    this.$toast.fail(res.msg)
                }
            })
        },
        qudao() {
            let params = {
                time_type: this.search.time_type
            }
            qudao(params).then(res => {
                if (res.status === 1) {
                    this.qudaoData = res.data.list
                } else {
                    this.$toast.fail(res.msg)
                }
            })
        },
        work() {
            let params = {

            }
            work(params).then(res => {
                if (res.status === 1) {
                    this.todayWork = res.data
                } else {
                    this.$toast.fail(res.msg)
                }
            })
        },
        loudou() {
            let params = {
                time_type: this.search.time_type
            }
            loudou(params).then(res => {
                if (res.status === 1) {
                    this.loudouData = res.data
                } else {
                    this.$toast.fail(res.msg)
                }
            })
        },
        sort() {
            let params = {
                time_type: this.search.time_type,
                data_type: this.sale_type
            }
            sort(params).then(res => {
                if (res.status === 1) {
                    this.sale_data = res.data.list
                } else {
                    this.$toast.fail(res.msg)
                }
            })
        },
        qudaoSort() {
            let params = {
                time_type: this.search.time_type,
                data_type: this.qudao_type
            }
            qudaoSort(params).then(res => {
                if (res.status === 1) {
                    this.qudao_data = res.data.list
                } else {
                    this.$toast.fail(res.msg)
                }
            })
        },
        // 获取列表
        getList() {
            this.loading = true;
            reservationList(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                    this.search.total = Number(res.data.count);
                }
                this.loading = false;
            })
        },
        // 数据明细
        detail(typeName, infotype) {
            const query = {
                time_type: this.search.time_type,
                typeName,
                infotype
            }
            this.$refs.detailDrawer.showDrawer(query);
        },
        // 获取 options
        getOptions() {
            memberList().then(res => {
                this.memberList = res.data.list || []
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.home-container {
    padding: 20px;
    .page-header {
        display: flex;
        justify-content: space-between;
        background: #fff;
        padding: 15px 20px 15px 10px;
        border-radius: 10px;
        .left {
            line-height: 20px;
            margin: 10px 0;
            padding-left: 10px;
            font-weight: bold;
            position: relative;
            &::before {
                content: "";
                width: 4px;
                height: 20px;
                background: linear-gradient(180deg, #3a7df2, #5cbafb);
                border-radius: 3px;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
    .card {
        width: 100%;
        background: #fff;
        border-radius: 10px;
        margin-top: 20px;
        padding: 20px;
        .title {
            line-height: 30px;
            font-weight: bold;
            position: relative;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            &::before {
                content: "";
                width: 4px;
                height: 20px;
                background: linear-gradient(180deg, #3a7df2, #5cbafb);
                border-radius: 3px;
                position: absolute;
                top: 6px;
                left: -10px;
            }
        }
    }
}
.content {
    height: 380px;
}
.chart-box {
    height: 248px;
}
.chart-box1 {
    height: 380px;
}
.sales-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item-b {
        width: 33.33%;
        height: 0;
    }
    .sales-li {
        width: 33.33%;
        margin-bottom: 24px;
        display: flex;
        .li-tit {
            font-size: 14px;
            font-weight: 400;
            line-height: 45px;
            color: #666;
        }
        .li-num {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            line-height: 45px;
            margin-left: 5px;
        }
    }
}
.sale-li {
    display: flex;
    width: 100%;
    height: 26px;
    margin-top: 12px;
    align-items: center;
    &:first-child {
        margin-top: 0;
    }
    .sale-num {
        width: 26px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        img {
            width: 26px;
            height: 26px;
        }
    }
    .sale-name {
        height: 26px;
        line-height: 26px;
        width: 100px;
        margin: 0 6px;
        font-size: 14px;
        color: #101739;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .center {
        width: 460px;
        margin-right: 30px;
    }
}
.work-li {
    background: #f7eee7;
    border-radius: 4px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 20px;
    margin-top: 10px;
    &:first-child {
        margin-top: 0;
    }
    .color {
        font-weight: bold;
        margin: 0 5px;
    }
}
.work-li:nth-of-type(2) {
    background: rgb(242, 223, 225);
}
.work-li:nth-of-type(3) {
    background: rgb(228, 239, 245);
}
.work-li:nth-of-type(5) {
    background: rgb(242, 223, 225);
}
.card1 {
    display: flex;
    flex-flow: wrap;
    padding: 20px 0 !important;
    .box-1 {
        width: 25%;
        display: flex;
        box-sizing: border-box;
        padding: 0 10px 0 25px;
        justify-content: space-between;
        border-right: 1px solid #e5e5e5;
        margin: 15px 0;
        .box-left {
            .box-tit {
                font-size: 14px;
                line-height: 20px;
                color: #444b6c;
            }
            .box-num {
                font-size: 26px;
                font-weight: 600;
                color: #101739;
                cursor: pointer;
                &:hover {
                    color: $g-sub-sidebar-menu-active-color;
                }
            }
            .add-rate {
                color: #f2333a;
                font-size: 12px;
            }
            .reduce-rate {
                color: #00ca5c;
                font-size: 12px;
            }
        }
    }
    .box-1:nth-of-type(4n) {
        border: 0;
    }
}
.box-right {
    height: 100px;
    width: 50%;
}
.bijiao {
    margin-left: 4px;
    color: #a2a5b5;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 400 !important;
}
</style>
